<template>
  <div class="map-wrap">
    <div class="mapCenter">
      <div class="opration-top">
        <p class="refrashDate">
          <span>{{ depotName }}</span>
        </p>
      </div>
      <div class="operate_btn" v-if="!isFullScreen">
        <div>
          <el-button
            title="返回全国"
            v-if="!isFullScreen"
            class="op_btn one"
            size="mini"
            @click.native="() => goBack()"
            >
            <!-- <i class="icon-fanhui1 iconfont"></i> -->
            <img src="@/assets/map-icon/fanhui.svg" alt="">
            </el-button
          >
        </div>
        <div>
          <el-button
            title="放大"
            v-if="!isFullScreen"
            class="op_btn one"
            size="mini"
            @click.native="() => zoomChange('add')"
            >
            <!-- <i class="icon-jia1 iconfont"></i> -->
            <img src="@/assets/map-icon/jia.svg" alt="">
            </el-button
          >
        </div>
        <div>
          <el-button
            title="缩小"
            v-if="!isFullScreen"
            class="op_btn one" 
            size="mini" 
            @click.native="() => zoomChange('reduce')"
            >
            <!-- <i class="icon-jian1 iconfont"></i> -->
            <img src="@/assets/map-icon/jian.svg" alt="">
            </el-button
          >
        </div>
        <div v-if="depotId == 100000">
          <el-button
            title="详情"
            v-if="!isFullScreen"
            class="op_btn one"
            size="mini" 
            @click.native="() => lookDetail()"
            >
            <img src="@/assets/map-icon/huojia.svg" alt="">
            </el-button
          >
        </div>
        <div>
          <el-button
            title="全屏"
            v-if="!isFullScreen"
            class="op_btn two"
            size="mini"
            @click.native="() => fullScreen(true)"
            >
            <!-- <i class="icon-fangda-01 iconfont"></i> -->
            <img src="@/assets/map-icon/fangda.svg" alt="">
            </el-button
          >
          <!-- <el-button
            title="退出全屏"
            v-if="isFullScreen"
            class="op_btn three"
            size="mini"
            @click.native="() => fullScreen(false)"
            >
            <img src="@/assets/map-icon/suoxiao.svg" alt="">
            </el-button
          > -->
        </div>
      </div>

      <div class="operate_btn operate_btn_fixed" v-if="isFullScreen">
        <div>
        <!-- <el-button
            title="退出全屏"
            v-if="isFullScreen"
            class="op_btn three"
            size="mini"
            @click.native="() => fullScreen(false)"
            >
            <img src="@/assets/map-icon/suoxiao.svg" alt="">
            </el-button
          > -->
        </div>
      </div>
      <div class="map-box">
        <EnclosureMap :depotId="depotId" ref="mapEnclosure" :depotCode="depotCode" />
      </div>
    </div>
  </div>
</template>

<script>
import "./mapChart.scss";
import EnclosureMap from "./map.vue";
export default {
  name: "mapBox",
  // 组件传参
  props: {
    depotId: {
      type: String,
      default: "",
    },
    isFullScreen: {
      type: Boolean,
      default: false,
    },
    depotName: {
      type: String,
      default: "中国",
    },
    depotCode: {
      type: String,
      default: "",
    },
  },

  data() {
    return {
    };
  },

  // 组件注册
  components: {
    EnclosureMap,
  },

  // 数据监听
  watch: {
  },

  mounted() {},

  // 方法实现
  methods: {
    // 查看货架详情
    lookDetail() {
      let routeData = this.$router.resolve({
        // path: "/gezi",
        path: "/visualShelf",
        query: {depotId: this.depotId}
      });
      window.open(routeData.href, "_blank");
    },
    // 全屏
    fullScreen(value) {
      this.$emit("fullScreen", value);
    },
    // 返回地图
    goBack() {
      this.$emit("goBack");
    },
    // 室内定位放大、缩小
    zoomChange(type) {
      this.$refs.mapEnclosure.zoomChange(type)
    }
  },
};
</script>

<style lang="scss" scoped>
.map-box {
  width: 100%;
  /* height: 6rem; */
  /* height: calc(94% - 1rem); */
  height: 88%;
  margin: 0px auto 0;
  overflow: hidden;
}
.mapCenter {
  position: relative;

  .operate_btn {
    position: absolute;
    bottom: 0.6rem;
    right: 0.5rem;
    z-index: 100000;

    .op_btn {
      color: #c6cde9;
      background-color: rgba(172, 178, 238, 0.1);
      border-color: #2fdfffff;
    
      margin: 0 0 10px 0;
      padding: 4px;
      i {
        font-size: 0.25rem !important;
      }
      img {
        width: 0.25rem;
        height: 0.25rem;
      }
    }

    .op_btn:hover {
      background-color: #014ea1ff;
      color: #fff;
    }


  }
  .operate_btn_fixed {
    position: fixed;
  }
}
</style>
